<template>
  <div>
  <div v-text="test" ></div>
      <span class="game-date-wrap">                                          <!--picker组件-->
      <div class="game-date-wrap-left">
        <span class="date">起始日期</span>
        <popup-picker  class="game-date_start-date-wrap" :data="playDateStart.data" :value='playDateStart.value' @onScroll='onPlayDStartScroll'>
          <span class="game-date_start-date_value" v-text='playDateStart.value[0] + "." + playDateStart.value[1] + "." +playDateStart.value[2]'></span>
          <i class="iconfont">&#xe62d;</i>
        </popup-picker>
      </div>                                                                                             <!--left div-->
        <div class="anon">-</div>                                                                      <!--middle div-->
       <div class="game-date-wrap-right">
         <span class="date">结束日期</span>
        <popup-picker  class="game-date_end-date-wrap" :data="playDateEnd.data" :value='playDateEnd.value' @onScroll='onPlayDEndScroll'>
          <span class="game-date_end-date_value" v-text='playDateEnd.value[0] + "." + playDateEnd.value[1] + "." +playDateEnd.value[2]'></span>
          <i class="iconfont">&#xe62d;</i>
        </popup-picker>
       </div>                                                                                           <!--right div-->
      <div class="search" @click="loadTop">查询</div>                   <!--refresh  方法-->
    </span>
    <div class="wrap" v-show="show">
      <gj-loadmore :bottom-method="loadBottom" ref="loadmore" class="loadmore">
        <div v-show="judge" style="text-align: center"><img src="../../assets/images/loading.gif" style="width:40px;height:40px;"/></div>
        <div class="box" v-for="(item,index) in datalist" :key="index">
          <div class="top">
            <div class="top-left"><span class="top-left-first" :class="{'rg':item.entrust_bs==2,'sg':item.entrust_bs==3,'sh':item.entrust_bs==4}">{{item.status}}</span><span class="top-left-middle">{{item.ofname}}</span><span class="top-left-last">{{item.ofcode}}</span></div>
            <div class="top-right"><img :src ="imgUrl(item)" alt=""></div>
          </div>
          <div class="down">
            <div class="down-left"><span class="down-left-left">{{item.entrust_vol}}</span><span class="down-left-last">委托份额</span></div>
            <div class="down-middle"><span class="down-middle-left">{{item.entrust_amt}}</span><span class="down-middle-last">委托金额</span></div>
            <div class="down-right"><span class="down-right-time">{{item.DT}}</span><span class="down-right-last">委托日期</span></div>
          </div>
        </div>
      </gj-loadmore>
    </div>
  </div>
</template>
<script>
  import LocalDAO from 'common/localDAO'
  import LoadMore from 'components/LoadMore'
  import RemoteDAO from 'common/remoteDAO'
  import Constant from 'common/constant'
  import CommonUtil from 'common/common.util'
  import PopupPicker from 'components/popup-picker'
  export default {
    data () {
      return {
        test:"",
        show:false,
        judge:false,
        tabIndex:1,
        start: 0,
        limit: 10,                                    //   限制一次加载的数量
        message: '',
        client_id:'',                              //    相当于userCode
        years:[],
        months: [],
        days: [],
        weeks: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
        playDateStart:{
          data:[],
          value:[]
        },
        isFirst:true,
        playDateEnd:{
          data:[],
          value:[]
        },
        datalist:[],
        error:''
      }
    },
    components: {
      'popup-picker':PopupPicker,
      'gj-loadmore':LoadMore,
    },
    created () {
      this.client_id = LocalDAO.getUserCode() ? LocalDAO.getUserCode() : '';   // get userCode
      this.initPicker();
    },
    methods:{
      initPicker () {                     //   初始化   picker
        let today = new Date();
        let year =today.getFullYear();     //  2017
        let month = today.getMonth();      //  5
        let day = today.getDate();      // 7
        let i;
        for(i=0; i<5; i++){                                              //   向前推了5年
          let tempY = year - i;
          this.years.push({name: tempY+'年',value: tempY +''});        //   [{name: 2017年,value: 2017},{name: 2016年,value: 2016},{name: 2015年,value: 2015}]
        }
        for(i=0;i<12;i++){
          this.months.push({name: i+1 + '月',value: i<10? '0'+(i+1): i+1+''});
        }
        let dayIndex = today.getDate() - 1;
        //开始日期
        this.playDateStart.data = [this.years, this.months, this.getDays(year, month)];
        this.playDateStart.value = [
          this.playDateStart.data[0][0].value,
          this.playDateStart.data[1][month].value,
          this.playDateStart.data[2][dayIndex].value
        ];
        //结束日期
        this.playDateEnd.data = [this.years, this.months, this.getDays(year, month)];
        this.playDateEnd.value = [
          this.playDateEnd.data[0][0].value,
          this.playDateEnd.data[1][month].value,
          this.playDateEnd.data[2][dayIndex].value
        ];
        this.autoSetStartDate();        //   设置开始日期
        this.autoSetEndDate();       //   设置结束日期
      },                                                                 //   initPicker   结束
      formatData (list) {                                            //   格式化返回的数据
        for(let i=0;i<list.length;i++){                              // 数据格式化entrust_bs字段
          let tempObj = list[i];
          tempObj.status = ''
          switch (tempObj.entrust_bs){
            case 2:
              tempObj.status = '认购'
              break;
            case 3:
              tempObj.status = '申购'
              break;
            case 4:
              tempObj.status = '赎回'
              break;                                                         //   此处去掉了  合并  和  分拆
          }
          tempObj.DT = CommonUtil.formatDateSlash(tempObj.entrust_date)+" "+CommonUtil.formatHourMinute(tempObj.entrust_time);
          tempObj.entrust_vol = CommonUtil.toFixed(tempObj.entrust_vol,2)
          tempObj.entrust_amt = CommonUtil.toFixed(tempObj.entrust_amt,2)
        }
        return list;
      },
      search () {                               //   历史委托      上拉加载方法
        let stdata = this.playDateStart.value[0] + this.playDateStart.value[1] + this.playDateStart.value[2];                  //  开始日期
        let endata = this.playDateEnd.value[0] + this.playDateEnd.value[1] + this.playDateEnd.value[2];                        //   结束日期
        var params = {                                                 //   参数对象
          client_id: this.client_id,
          entrust_type: 4,                                           //   统一传4
          start: this.start,                                          //  第一次加载时候是 0                 每次都是从  this.start  来取得start的值
          limit: this.limit,                                          //   第一次加载时候是20
          entrust_typeid: '',
          start_date: stdata,
          end_date: endata
        };
        this.show=true;
        RemoteDAO.callJCL11172(params,response=>{//   历史委托的接口
          if(response.error == '0'){
            this.judge = false;
             let mrecords = response.data.body.records;
             let templist = this.formatData(mrecords);
             this.datalist=this.datalist.concat(templist);
            if(this.datalist.length==0){
            	 if(this.start == 0){
                  this.error = '暂无数据'
                  this.$refs.loadmore.onBottomError(this.error);
               }else{
                  this.$refs.loadmore.onBottomAllLoaded();
               }
             }else{
                if(mrecords.length>0 && mrecords.length == this.limit){
                   this.start+=this.limit;
                   this.$refs.loadmore.onBottomLoaded();
                }else{
                  this.$refs.loadmore.onBottomAllLoaded();
                }
             }
          }else{
          	this.$refs.loadmore.onBottomError('');
            this.$store.dispatch("setTip",{text:response.data});
            this.datalist = [];
            this.start=0;
            this.judge = false;
          }
        });
      },
      imgUrl(item){                                                                //  图片
        var url = '';
        if(item.entrust_status == '0'){                                           //    已回
          url = require('../../assets/images/yihui.png')
        }else if(item.entrust_status == '1'){                                     //    已撤
          url = require('../../assets/images/yichedan.png')
        }else if(item.entrust_status == '2'){                                   //   全部成交
          url = require('../../assets/images/yicheng.png')
        }else if(item.entrust_status == '3'){                                   //   部分成交
          url = require('../../assets/images/order-status3.png')
        }else if(item.entrust_status == '4'){                                   //      部撤
          url = require('../../assets/images/order-status4.png')
        }else if(item.entrust_status == '5'){                                 //  废单
          url = require('../../assets/images/feidan.png')
        }
        return url;
      },
      autoSetStartDate () {                                                    //  picker的工具方法设置开始时间
        let year = parseInt(this.playDateStart.value[0]);
        let tempD = new Date(year, parseInt(this.playDateStart.value[1]) - 1, parseInt(this.playDateStart.value[2]));
        tempD = new Date(tempD.getTime() + this.oneD);
      },
      autoSetEndDate () {                                                     //  picker的工具方法设置结束时间
        let year = parseInt(this.playDateEnd.value[0]);
        let tempD = new Date(year, parseInt(this.playDateEnd.value[1]) - 1, parseInt(this.playDateEnd.value[2]));
        tempD = new Date(tempD.getTime() + this.oneD);
      },
      getDays(year,month){                                          //  picker的工具方法
        year = parseInt(year);
        month = parseInt(month);
        let isRN = 0;
        if((year%4 == 0 && year%100 != 0) || (year%400 == 0)) isRN = 1;
        let monthsDay = [31, 28+isRN, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        let days = [], tempToday = new Date(year, month);
        for(let i=0; i<monthsDay[month];i++){
          tempToday.setDate(i+1);
          days.push({name: i+1+' '+ this.weeks[tempToday.getDay()], value: (i+1) < 10 ? '0'+(i+1):i+1+''});
        }
        return days;
      },
      onPlayDStartScroll(val){
        this.playDateStart.data = [this.years, this.months, this.getDays(val[0], (parseInt(val[1]) - 1))];
        this.playDateStart.value = val;
      },
      onPlayDEndScroll(val){
        this.playDateEnd.data = [this.years, this.months, this.getDays(val[0], (parseInt(val[1]) - 1))];
        this.playDateEnd.value = val;
      },
      back(){
        if(this.btn ==  Constant.leftBtn.CLOSE || typeof (this.$route.query.cleanStorage)!== 'undefined'){
          window.location.href = 'gtjanormal://goback'
        }else{
          this.$router.go(-1)
        }
      },
      loadBottom () {/*上拉加载*/
         if(!this.isFirst){
          this.search();
         }
      },
      loadTop(){
        let stdata = this.playDateStart.value[0] + this.playDateStart.value[1] + this.playDateStart.value[2];                  //  开始日期
        let endata = this.playDateEnd.value[0] + this.playDateEnd.value[1] + this.playDateEnd.value[2];                        //   结束日期
        if(stdata > endata){
          this.$store.dispatch("setTip",{text:'日期设置错误，起始日期大于结束日期'});
        }else{
          this.isFirst=false;
          this.start=0;
          this.datalist=[];
          this.$refs.loadmore.reset();
        }
      }
    }
  }
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .wrap{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
  }
  .box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 95px;
    background-color: white;
    border-bottom: 1px solid #e7e7e7;
  }
  .top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 5px;
  }
  .top-left{
    margin-left: 16px;
    margin-top: 5px;
    flex:6;
    -webkit-flex:6;
  }
  .top-right{
    margin-right: 26px;
    margin-top: 0px;
    flex:1;
    -webkit-flex:1;
  }
  .down{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 8px;
  }
  .down-left-left{
    font-size: 16px;
  }
  .down-middle-left{
    font-size: 16px;
  }
  .down-right-time{
    font-size: 14px;
  }
  .down-right-last{
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-top: 3px;
  }
  .down-middle-last{
    font-size: 12px;
    color: #999;
  }
  .down-left-last{
    font-size: 12px;
    color: #999;
  }
  .down span{
    display: block;
  }
  .top-left-first{
    font-size: 12px;
    width: 30px;
    height: 18px;
    color: #fff;
    background-color: #f66e7b;
    border-radius: 3px;
  }
  .top-left-middle{
    font-size: 16px;
    margin-left: 4px;
  }
  .top-left-last{
    font-size: 10px;
    color: #999;
    margin-left: 5px;
  }







  @media screen and (max-width: 320px){
    .down-right-right{
      width: 30px;
      height: 30px;
      line-height: 30px;
    }
  }
  .loadmore{
    width: 100%;
  }
  .rightcopy{
    width: 43px;
    height: 43px;
    line-height: 43px;
    /*background-color: #5d5d5d;*/
    color: white;
    font-size: 12px;
    border-radius: 5px;
    text-align: center;
  }
  .anon{
    margin-right: -12px;
    margin-left: -12px;
    margin-top: 18px;
  }
  .date{
    display: block;
    font-size: 12px;
    color: #989898;
  }

  .game-date-wrap{
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 76px;
    width: 100%;
    background-color: white;
    border-bottom: 10px solid #f2f3f7;
    padding-bottom: 7px;
  }
  .game-date-wrap-left{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .game-date-wrap-right{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .game-date_start-date-wrap{
    color: #565656;
    border: solid 1px #D8D8D8;
    /* padding: 4px; */
    border-radius: 3px;
    display: inline-block;
    width: 123px;
    height: 31px;
  }
  .game-date_start-date_value{
    height: 31px;
    line-height: 31px;
  }
  .game-date_end-date_value{
    height: 31px;
    line-height: 31px;
  }
  .game-date_start-date-wrap i{
    color: white;
    font-size: 14px;
    border-radius: 2px;
    background-color: rgba(95, 170, 232, 1);
    float: right;
    padding: 0 8px;
    height: 30px;
    line-height: 30px;
  }
  .game-date_end-date-wrap{
    color: #565656;
    border: solid 1px #D8D8D8;
    /* padding: 4px; */
    border-radius: 3px;
    display: inline-block;
    width: 123px;
    height: 31px;
  }
  .game-date_end-date-wrap i{
    color: white;
    font-size: 14px;
    border-radius: 2px;
    background-color: rgba(95, 170, 232, 1);
    float: right;
    padding: 0 8px;
    height: 30px;
    line-height: 30px;
  }
  .search{
    margin-top: 20px;
    width: 61px;
    height: 29px;
    background-color: #1bafeb;
    color: white;
    border-radius: 5px;
    line-height: 29px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }







  .rg{
    width: 30px;
    height: 18px;
    background-color: #ff9f52;
    font-size: 12px;
    color: white;
    border-radius: 3px;
  }
  .sg{
    width: 30px;
    height: 18px;
    background-color: #f66e7b;
    font-size: 12px;
    color: white;
    border-radius: 3px;
  }
  .sh{
    width: 30px;
    height: 18px;
    background-color: #a460c8;
    font-size: 12px;
    color: white;
    border-radius: 3px;
  }



  .header-trade-title{
    width: 180px;
    height: 30px;
    line-height: 30px;
    margin: 7px auto;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: RGBA(48,71,187,0.6);
    border-radius: 15px;
    border: 1px solid #6D92D7;
  }
  .title{
    height: 30px;
    line-height: 28px;
    width: 89px;
    text-align: center;
    float: left;
    font-size: 14px;
    color: #FFFFFF;
  }



  @media screen and (max-width: 320px) {
    .game-date_start-date-wrap{
      height: 26.35px !important;
      width: 102.85px !important;
      line-height: 26.35px !important;
    }
    .game-date_start-date-wrap i{
      font-size: 10px;
      height: 25px;
      line-height: 25px;
    }
    .game-date_end-date-wrap i{
      font-size: 10px;
      height: 25px;
      line-height: 25px;
    }
    .game-date_end-date-wrap{
      height: 26.35px !important;
      line-height: 26.35px !important;
      width: 102.85px !important;
    }
    .game-date_start-date_value{
      line-height: 26.35px;
    }
    .game-date_end-date_value{
      line-height: 26.35px;
    }
    .search{
      width: 51.85px;
      height: 24.65px;
      line-height: 24.65px;
    }
  }
  @media screen and (max-width: 375px) {

  }
</style>
